<template>
  <wd-form :model="formData" ref="formRef">
    <wd-cell-group custom-class="p-0! m-0!" :border="true">
      <template v-for="field in fields" :key="field.name">
        <wd-cell
          v-if="field.fieldType === 'upload'"
          :prop="field.name"
          :rules="field.rules"
          :vertical="true"
          custom-class="p-0! m-0!"
        >
          <template #title>
            <view class="flex flex-justify-between">
              <view>
                <wd-text type="primary" :text="field.label"></wd-text>
                <wd-icon name="warn-bold" color="red" size="27rpx" custom-class="ml-3"></wd-icon>
              </view>
              <view>
                <!-- <wd-popover use-content-slot placement="left-end">
                    <template #content>
                      <view class="w-400rpx">
                        <view>备注</view>
                        <wd-input v-model="formData[field.name].remark" placeholder="备注" />
                      </view>
                    </template>
                    <wd-icon name="edit" size="28rpx"></wd-icon>
                  </wd-popover> -->
              </view>
            </view>
          </template>
          <view class="flex">
            <template v-for="(item, index) in formData[field.name]" :key="index">
              <view :class="!isTrue ? 'warning-wrapper ml-2' : 'ml-2'" v-if="item.isAnomaly || isTrue">
                <image
                  class="w74px h74px bg-#f5f5f5 flex justify-center flex-items-center"
                  :src="item.url"
                  mode="aspectFit"
                  @click="previewImage(item.url)"
                />
              </view>
            </template>
          </view>
          <wd-divider>{{ !isTrue ? '待整改' : '出现变动' }}</wd-divider>
          <UploadFiles
            :accept="field.uploadConfig.accept"
            v-model="test"
            @validate="handleValidate(field.name, $event)"
          />
        </wd-cell>
      </template>
    </wd-cell-group>
    <div class="pb-3">
      <wd-button :block="true" @click="submit">保存</wd-button>
    </div>
  </wd-form>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import UploadFiles from './formItem/UploadFiles.vue'
import type { FormField } from './types'

const formRef = ref()
const test = ref([])
const props = defineProps<{
  fields: FormField[]
  initialValues?: Record<string, any>
  isTrue?: boolean
}>()
const emit = defineEmits(['update:modelValue', 'submit'])
const formData = ref({ ...props.initialValues })
watch(
  () => props.initialValues,
  newVal => {
    formData.value = { ...newVal }
  },
  { deep: true }
)
const previewImage = url => {
  wx.previewImage({
    current: url, // 当前图片的 URL
    urls: [url] // 确保类型为 string[]
  })
}
const errors = ref<Record<string, string>>({})

const handleValidate = (name: string, isValid: boolean) => {
  errors.value[name] = isValid ? '' : '验证失败'
}

const submit = () => {
  emit('submit', { formRef, formData })
  // 提交逻辑
}
</script>
<style lang="scss" scoped>
.warning-wrapper {
  position: relative;
  padding: 6rpx;
  border-radius: 12rpx;
  background: linear-gradient(
    45deg,
    rgba(255, 59, 48, 0.1) 0%,
    rgba(255, 59, 48, 0.2) 74%,
    rgba(255, 59, 48, 0.1) 100%
  );

  &::after {
    content: '';
    position: absolute;
    top: -4rpx;
    left: -4rpx;
    right: -4rpx;
    bottom: -4rpx;
    border: 2rpx solid rgba(255, 59, 48, 0.3);
    border-radius: 16rpx;
    pointer-events: none;
  }
}
</style>
